<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #00aaff;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }

        .del-button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

        .del-button:hover {
            background-color: #45a049;
        }

        .search-icon {
            background-color: #f2f2f2;
            border: 1px solid #ddd;
            padding: 5px;
            cursor: pointer;
        }

        .search-icon:hover {
            background-color: #ddd;
        }

        .add-button,
        .save-button {
            background-color: #00aaff;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            margin: 5px;
        }

        .add-button:hover,
        .save-button:hover {
            background-color: #009acd;
        }

        .add_none {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            height: 400px;
            background-color: #45a049;

        }

        .a{
            background-color: #45a049;
        }

        .b{
            background-color: azure;
        }
    </style>
</head>

<body>
    <div id="mains">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>名称</th>
                    <th>链接</th>
                    <th>叙述</th>
                    <th>操作</th>
                </tr>
            </thead>
    
            <tbody class="table-body" >
                <tr v-for="(item, index) in arr" :key="index" v-color="index" v-mouseenter="index" :class="{'a': index % 2 === 0, 'b': index % 2 === 1}">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td><a :href="item.link" target="_blank">{{ item.link }}</a></td>
                    <td>{{ item.desc }}</td>
                    <td><button class="del-button" @click="del(item.id)">删除</button></td>
                </tr>
    
            </tbody>
        </table>
    
        <div class="add_none" v-if="add_nones">
            名称： <input type="text" name="" id="" v-model="name">
            <br>
            链接： <input type="text" name="" id="" v-model="link">
            <br>
            叙述：<input type="text" name="" id="" v-model="desc">
            <br>
            <button class="save-button" @click="add()">保存</button>
        </div>
    
        <div>
            <button class="add-button" @click="add_nones=true">新增</button>
    
        </div>
    </div>

    <div id="box">
        <input type="text" name="" id="num1" v-model.number="num1">
        <select id="num3" v-model="num2">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="" id="num2" v-model.number="num3">

        <p>{{num1}}{{num2}}{{num3}}={{ result }}</p>
    </div>

</body>

<script>


// 鼠标移入变色
Vue.directive('mouseenter', {
    bind: function (el, binding) {
        el.addEventListener('mouseenter', () => {
            el.style.backgroundColor = 'pink';
        });
        el.addEventListener('mouseleave', () => {
            el.style.backgroundColor = ''; 
        });
    }
});

    //隔行变色
    Vue.directive('color', {
        bind: function (el, binding) {
            el.style.backgroundColor = binding.value % 2 === 0 ? 'lightgray' : 'white';
        }
    });

    new Vue({
        el: '#mains',
        data: {
            name: '',
            link: '',
            desc: '',
            add_nones: false,
            arr: [{
                id: 1,
                name: '哔哩哔哩',
                link: 'https://www.bilibili.com/',
                desc: 'bilibili'
            },
            {
                id: 2,
                name: '微博',
                link: 'https://weibo.com/',
                desc: 'weibo'
            },
            {
                id: 3,
                name: '知乎',
                link: 'https://www.zhihu.com/',
                desc: 'zhihu'
            },
            {
                id: 4,
                name: '百度',
                link: 'https://www.baidu.com/',
                desc: 'baidu'
            },
            {
                id: 5,
                name: '淘宝',
                link: 'https://www.taobao.com/',
                desc: 'taobao'
            }],
        },
        methods: {
            add: function () {
                this.add_nones = !this.add_nones
                this.arr.push({
                    id: this.arr.length + 1,
                    name: this.name,
                    link: this.link,
                    desc: this.desc,
                });
            },


            del: function (id) {
                var index = this.arr.findIndex(item => item.id === id);
                this.arr.splice(index, 1);
            }
        }
    })


    new Vue({
            el: '#box',
            data: {
                num1: '',
                num2: '',
                num3: '',
            },
            computed: {
                result: function () {
                    switch (this.num2) {
                        case '+':
                            return this.num1 + this.num3;
                        case '-':
                            return this.num1 - this.num3;
                        case '*':
                            return this.num1 * this.num3;
                        case '/':
                            return this.num3 !== 0 ? this.num1 / this.num3 : '除数不能为零';
                        default:
                            return alert('请输入运算符号');
                    }
                }
            }
        });


</script>



</html>




